<<!include:header>>
    <style>
        label {
            position: relative;
            margin-left: 10px;
        }

        .input {
            opacity: 0;
        }

        .boderCheckBox {
            top: 50%;
            left: 0px;
            margin-top: -5px;
            width: 10px;
            height: 10px;
            position: absolute;
            border: 1px solid #e74725;
        }

        .input:checked+i {
            background-color: #e74725;
        }
    </style>
    <section class="hero-section litte-header">
        <div class="container">
            <div class="filtrate mb40 ft15    ">
                <div class="filtrate mb40 ft15   " style="margin-top:150px;color:#fff">

                </div>
            </div>
        </div>

    </section><!-- End Hero -->
    <div class="container" style="margin-top:50px;">
        <div class="row" style="margin: 50px;">
            <h2 style="width: 100%;" class="text-center">证书查询</h2>
        </div>
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label>电话号码</label>
                    <input type="text" class="form-control" onblur="onTelBlurHandler()" id="telUI"
                        placeholder="输入11位电话号码">
                </div>
                <div class="form-group">
                    <label>身份证号</label>
                    <input type="text" class="form-control" id="idcard" placeholder="输入身份证号">
                </div>
                <div class="form-group">
                    <label> 验 证 码</label>
                    <input type="text" class="form-control" style=" width: 120px" id="code" placeholder="验证码">
                </div>
                <div class="form-group">
                    <label> </label>
                    <img style="height:50px;width: 122px;border: 1px solid;" id="codeImg" onclick="getCode()" />

                </div>
                <div class="form-group">
                    <label> </label>
                    <button type="button" class="btn btn-primary" onclick="certQuery()"> 查询</button>
                </div>

            </form>


        </div>


        <hr color="#f7f7f7" style="margin:30px;   border: 1px solid #d9d9d9">
        <div id="certListDiv">




        </div>

    </div>
    <script src="https://cdn.staticfile.org/js-sha1/0.6.0/sha1.min.js"></script>
    <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
    <script>
        var userPhone = "";
        var idcard = "";
        var yzm = "";

        // 提交查询
        function onTelBlurHandler() {
            userPhone = document.getElementById("telUI").value;
            if (userPhone.length != 11) {
                return;
            }
            getCode(userPhone);
        }
        function certQuery() {
            idcard = document.getElementById("idcard").value;
            code = document.getElementById("code").value;

            if (userPhone.length < 10) {
                alert("电话号码必填");
                return;
            }
            if (idcard.length < 10) {
                alert("身份证号码必填");
                return;
            }
            if (code.length < 3) {
                alert("验证码必填");
                return;
            }

            document.getElementById("certListDiv").innerHTML = "";

            axios.get('/api/cert/listCert/0/0?tel=' + userPhone + "&yzm=" + code + "&idcard=" + idcard,)
                .then(function (response) {
                    var res = response.data;
                    if (res.code != 200) {

                        alert(res.title)
                        return;
                    }
                    var result = "";

                    for (var i = 0; i < res.data.length; i++) {
                        item = res.data[i];
                        result += ` <div class="row media" style="background-color:#f7f7f7 ;overflow: hidden; border:1px solid #f1f1f1;margin-bottom:20px;padding:20px;width:100%">
                    <div class="col-xs-7 col-sm-7 col-md-8 col-lg-8 media-left">
                        <img class="media-object" style="max-width:100%;max-height:100%;" src="`+ item.Imageurl + `" alt="` + item.Label + `">
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-4 col-lg-4  media-body" style="margin-left: 30px;">
                       
                            <span class="media-heading" style="font-size:38px;color:chocolate">`+ item.Label + `</span>
                     
                      <p>  `+ item.Comment + ` </p>
                    </div>
                   
                </div>`;
                    }

                    document.getElementById("certListDiv").innerHTML = result;

                });

        }

        function getCode(tel) {
            axios.post('/api/manager/getCaptcha/' + tel)
                .then(function (response) {
                    var res = response.data;
                    if (res.code != 200) {

                        alert(res.title)
                        return;
                    }
                    document.getElementById("codeImg").setAttribute("src", res.data)

                    this.codeUrl = res.data;
                });


        }

    </script>
    <<!include:footer>>